import { Table, message, Popconfirm, Space, Modal, Row, Col, List as AntdList, Card, Segmented, Avatar } from "antd";
import { useModel, useOutletContext, history } from "umi";
import { Card as SemiCard, ButtonGroup, Button, List } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconDelete, IconClose, IconEyeOpened } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect } from "react";

import useOrganizationApplicationRole from "../../hooks/useOrganizationApplicationRole";

const ServicersAuthedRolesPage = () => {
    const { selectedServicer, updateSelectedServicerRoles } = useOutletContext();
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent } = useModel("global.modal");

    const deleteRole = async (item) => {
        let oasRole = selectedServicer.oasRole.filter((_item) => _item !== item);
        updateSelectedServicerRoles(selectedServicer, oasRole);
    };

    const openAddRole = async () => {
        setModalTitle("添加可授权的组织角色");
        setModalWidth(600);
        setModalComponent(<AddOrganizationApplicationRole selectedServicer={selectedServicer} updateSelectedServicerRoles={updateSelectedServicerRoles} />);
        setModalVisible(true);
    };

    return (
        <div style={{ padding: 10 }}>
            <Card
                title="可授权的组织角色"
                size="small"
                bordered={false}
                bodyStyle={{ padding: 10 }}
                extra={
                    <ButtonGroup>
                        <Button disabled={!selectedServicer.oasStat} icon={<IconPlusCircle />} onClick={openAddRole}>
                            添加可授权的组织角色
                        </Button>
                    </ButtonGroup>
                }
            >
                <AntdList
                    grid={{ gutter: 16, column: 6 }}
                    dataSource={selectedServicer.oasRole}
                    renderItem={(item, index) => (
                        <AntdList.Item key={index} style={{ marginBottom: 16 }}>
                            <Card
                                hoverable
                                size="small"
                                actions={[
                                    <IconEyeOpened onClick={() => history.replace("/application_organization/by_role", { roleName: item })} />,
                                    <Popconfirm title={`确认要删除该组织角色吗?`} onConfirm={() => deleteRole(item)}>
                                        <IconDelete style={{ color: "#E91E63" }} />
                                    </Popconfirm>,
                                ]}
                            >
                                <Card.Meta avatar={<Avatar>{index + 1}</Avatar>} title={item} />
                            </Card>
                        </AntdList.Item>
                    )}
                />
            </Card>
        </div>
    );
};

const AddOrganizationApplicationRole = ({ selectedServicer, updateSelectedServicerRoles }) => {
    const { loadOrganizationApplicationRoles, dataLoading, roles } = useOrganizationApplicationRole();

    const state = useReactive({
        dataSource: [],
        selectedRoles: [],
    });

    useEffect(() => {
        loadOrganizationApplicationRoles();
    }, []);

    useEffect(() => {
        state.dataSource = roles.filter((item) => selectedServicer.oasRole.findIndex((_item) => _item === item.oarName) === -1);
    }, [roles, selectedServicer.oasRole]);

    const add = async (record) => {
        state.selectedRoles.push(record.oarName);
        let newRoles = [...selectedServicer.oasRole, ...state.selectedRoles];
        updateSelectedServicerRoles(selectedServicer, newRoles);
        state.dataSource = roles.filter((item) => newRoles.findIndex((_item) => _item === item.oarName) === -1);
    };

    return (
        <Table loading={dataLoading} dataSource={state.dataSource} bordered size="small" pagination={false} rowKey={"nodeId"}>
            <Table.Column title="角色名称" dataIndex={"oarName"} />
            <Table.Column title="操作" align="center" render={(_, r, i) => <a onClick={() => add(r)}>添加</a>} />
        </Table>
    );
};

export default ServicersAuthedRolesPage;
